<template>
    <div class="body">
        <div class="mask">
            <div class="dialog" @click.stop v-show="!isLoad">
                <div class="header">
                    <div  class="headerLeft" v-if="mainAcount.length">
                        <img class="avatar" :src="mainAcount[0].avatar" alt="">
                        <div class="username">{{mainAcount[0].nickname || mainAcount[0].wxid}}</div>
                        <!-- <button class="sendBtn" style="position: unset;margin-left: 20px;" @click.stop="refresh">刷新</button> -->
                    </div>
                    <div v-show="!searchVisible">
                        <button class="sendBtn" style="position: unset;margin-left: 20px;" @click.stop="searchVisible = true">搜索</button>
                        <button class="sendBtn" style="position: unset;margin-left: 20px;" @click.stop="refresh">刷新</button>
                    </div>
                    <div v-if="searchVisible" style="display: flex;align-items: center;">
                        <div class="searchBox">
                            <img src="../assets/search.png" class="searchIcon" alt="">
                            <input type="text" @input="handleInput" v-model="searchVal" class="searchInput">
                            <img src="../assets/close.png" class="searchClose" v-show="searchVal" @click="searchVal = '',searchUserList = [],searchMsgList = []" alt="">
                        </div>
                        <button class="sendBtn" style="position: unset;margin-left: 20px;" @click.stop="searchVisible = false">返回</button>
                    </div>
                </div>
                <div class="chatBig" v-show="!searchVisible">
                    <div class="chatLeft"  @scroll="chatLeftScroll">
                        <div class="chatLeftItems" :style="{background: index == activeIndex ? '#CCCBCA' : 'unset'}" v-for="(item,index) in userList" @click.stop="userListClick(item,index,'user')" :key="index">
                            <div class="chatuserAvatarBox">
                                <img class="chatuserAvatar" :src="item.avatar ? item.avatar : require('../assets/logo.png')" alt="">
                            </div>
                            <div class="chatUserInfo">
                                <div class="chatUserNameAndTimeBox">
                                    <div class="chatUserName">{{item.nickname || item.account || '群聊'+item.wxid}}</div>
                                    <!-- <div class="time">16:53</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chatRight" id="chatRight" v-if="msgList.length"  ref="main">
                        <div class="chatRightTop">
                            {{userList[activeIndex]?.nickname || userList[activeIndex]?.wxid}} 
                        </div>
                        <div class="chatRightCenter" id="chatRightCenter" ref="content"  @scroll="showScroll">
                            <div class="chatBigMsg" v-for="(item,index) in msgList" :key="index">
                                <div class="friendMsgBox" v-if="item.from_wxid != mainAcount[0].wxid">
                                    <div class="timeBox" v-if="item.dateTime">{{item.dateTime}}</div>
                                    <div style="display: flex;align-items: flex-start;">
                                        <img :src="item.avatar ? item.avatar : require('../assets/logo.png')" alt="" class="frientAvatart">
                                        <div class="firendMsg">
                                                <div class="friendName">{{item.nickname}}</div>
                                                <div class="friendMsgContent" v-if="item.type == 'MT_RECV_TEXT_MSG'">
                                                    {{item.msg}}
                                                </div>
                                                <img style="width:200px;cursor: pointer;" v-if="item.type == 'MT_RECV_PICTURE_MSG'" @click.stop="bigImgUrl = (baseUrl+item.msg),bigImgUrlVisible = true" :src="baseUrl+item.msg"/>
                                                <!-- <iframe src="" width="600px" height="600px"></iframe> -->
                                                <!-- <a href="file://G:\project\project">打开文件目录</a> -->
                                                <div class="fileBox"  v-if="item.type == 'MT_RECV_FILE_MSG'" @click="openFile(item.url+item.msg)">
                                                    <img class="fileImg" src="../assets/file.png" alt="">
                                                    <div class="fileName">
                                                        {{item.fileName}}
                                                    </div>
                                                </div>
                                                <video controls width="250" :src="baseUrl+item.msg" v-if="item.type == 'MT_RECV_VIDEO_MSG'">
                                                </video>
                                        </div>
                                    </div>
                                </div>
                                <div class="selfMsgBox" v-else>
                                    <div class="timeBox" v-if="item.dateTime">{{item.dateTime}}</div>
                                    <div class="selfMsg">
                                        <div class="selfNameBox">
                                            <div class="selfName">{{item.nickname}}</div>
                                            <div class="selfMsgContent" v-if="item.type == 'MT_RECV_TEXT_MSG'">
                                                {{item.msg}}
                                            </div>
                                            <img style="width:200px;cursor: pointer;" v-if="item.type == 'MT_RECV_PICTURE_MSG'"  @click.stop="bigImgUrl = (baseUrl+item.msg),bigImgUrlVisible = true"  :src="baseUrl+item.msg"/>
                                            <div class="fileBox"  v-if="item.type == 'MT_RECV_FILE_MSG'"  @click="openFile(item.url+item.msg)">
                                                <div class="fileName" style="padding-left: 0;padding-right: 10px;">
                                                   {{item.fileName}}
                                                </div>
                                                <img class="fileImg" src="../assets/file.png" alt="">
                                            </div>
                                            <video controls width="250" :src="baseUrl+item.msg" v-if="item.type == 'MT_RECV_VIDEO_MSG'">
                                            </video>
                                        </div>
                                        <img :src="item.avatar ? item.avatar : require('../assets/logo.png')"  alt="" class="selfAvatart">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chatRightBot">
                            <textarea class="chatArea" name="" id="" cols="30" rows="10"></textarea>
                            <button class="sendBtn">发送</button>
                        </div>
                    </div>
                </div>
                <div  class="chatBig"  v-show="searchVisible">
                    <div class="chatLeft"  @scroll="chatLeftScroll">
                        <div class="chatLeftItems" :style="{background: index == searchActiveIndex ? '#CCCBCA' : 'unset'}" v-for="(item,index) in searchUserList" @click.stop="userListClick(item,index,'search')" :key="index">
                            <div class="chatuserAvatarBox">
                                <img class="chatuserAvatar" :src="item.avatar ? item.avatar : require('../assets/logo.png')" alt="">
                            </div>
                            <div class="chatUserInfo">
                                <div class="chatUserNameAndTimeBox">
                                    <div class="chatUserName">{{item.nickname || item.account || '群聊'+item.wxid}}</div>
                                    <!-- <div class="time">16:53</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chatRight" id="chatRight" v-if="searchMsgList.length"  ref="main">
                        <div class="chatRightTop">
                            {{searchUserList[searchActiveIndex]?.nickname || searchUserList[searchActiveIndex]?.wxid || '搜索到的消息或文件'}} 
                        </div>
                        <div class="chatRightCenter" id="chatRightCenterSearch" ref="contentSearch"  @scroll="searchShowScroll">
                            <div class="chatBigMsg" v-for="(item,index) in searchMsgList" :key="index">
                                <div class="friendMsgBox" v-if="item.from_wxid != mainAcount[0].wxid">
                                    <div class="timeBox" v-if="item.dateTime">{{item.dateTime}}</div>
                                    <div style="display: flex;align-items: flex-start;">
                                        <img :src="item.avatar ? item.avatar : require('../assets/logo.png')" alt="" class="frientAvatart">
                                        <div class="firendMsg">
                                                <div class="friendName">{{item.from_wxid}}</div>
                                                <div class="friendMsgContent" v-if="item.type == 'MT_RECV_TEXT_MSG'">
                                                    {{item.msg}}
                                                </div>
                                                <img style="width:200px;cursor: pointer;" v-if="item.type == 'MT_RECV_PICTURE_MSG'" @click.stop="bigImgUrl = (baseUrl+item.msg),bigImgUrlVisible = true" :src="baseUrl+item.msg"/>
                                                <!-- <iframe src="" width="600px" height="600px"></iframe> -->
                                                <!-- <a href="file://G:\project\project">打开文件目录</a> -->
                                                <div class="fileBox"  v-if="item.type == 'MT_RECV_FILE_MSG'" @click="openFile(item.url+item.msg)">
                                                    <img class="fileImg" src="../assets/file.png" alt="">
                                                    <div class="fileName">
                                                        {{item.fileName}}
                                                    </div>
                                                </div>
                                                <video controls width="250" :src="baseUrl+item.msg" v-if="item.type == 'MT_RECV_VIDEO_MSG'">
                                                </video>
                                        </div>
                                    </div>
                                </div>
                                <div class="selfMsgBox" v-else>
                                    <div class="timeBox" v-if="item.dateTime">{{item.dateTime}}</div>
                                    <div class="selfMsg">
                                        <div class="selfNameBox">
                                            <div class="selfName">{{item.from_wxid}}</div>
                                            <div class="selfMsgContent" v-if="item.type == 'MT_RECV_TEXT_MSG'">
                                                {{item.msg}}
                                            </div>
                                            <img style="width:200px;cursor: pointer;" v-if="item.type == 'MT_RECV_PICTURE_MSG'"  @click.stop="bigImgUrl = (baseUrl+item.msg),bigImgUrlVisible = true"  :src="baseUrl+item.msg"/>
                                            <div class="fileBox"  v-if="item.type == 'MT_RECV_FILE_MSG'"  @click="openFile(item.url+item.msg)">
                                                <div class="fileName" style="padding-left: 0;padding-right: 10px;">
                                                   {{item.fileName}}
                                                </div>
                                                <img class="fileImg" src="../assets/file.png" alt="">
                                            </div>
                                            <video controls width="250" :src="baseUrl+item.msg" v-if="item.type == 'MT_RECV_VIDEO_MSG'">
                                            </video>
                                        </div>
                                        <img :src="item.avatar ? item.avatar : require('../assets/logo.png')"  alt="" class="selfAvatart">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div  class="dialog"  v-show="isLoad">
                <div class="tips">页面加载中...</div>
            </div>
            <div  class="dialog" style="display: flex;flex-direction: column;align-items: center;" v-if="bigImgUrlVisible">
                <div class="header">
                    <div  class="headerLeft" v-if="mainAcount.length">
                        <div class="username">图片预览</div>
                    </div>
                    <img class="headClose" @click.stop="bigImgUrlVisible = false" src="../assets/close.png" alt="">
                </div>
                <img :src="bigImgUrl" style="width: 80%;margin-top: 100px;" alt="">
            </div>
        </div>
    </div>
  
</template>

<script>
import baseURL from '../http/baseUrl.js'
import {getUserInfo,getMsgContent} from '../http/api.js'
export default {
    data(){
        return{
            activeIndex:0,
            searchVal:'',
            searchActiveIndex:-1,
            itemUserInfo:'',
            offset:0,
            userOfferset:0,
            mainAcount:[],
            userList:[],
            searchMsgList:[],
            searchUserList:[],
            msgList:[],
            bigImgUrlVisible:false,
            searchIsClickLeft:false,
            searchVisible:false,
            searchTopFlag:false,
            bigImgUrl:'',
            topFlag:false,
            isShowofficeViewer:false,
            isFresh:false,
            searchIsFresh:false,
            isLoad:true,
            baseUrl:baseURL.url2,
            wxid:'',
            searchWxid:'',
            contrastList:[],//用来对比的数组（判断是否有新用户）
            userFreshFlag:false,
            docUrl:'G:\\project\\project\\汇德MES 一期 字段整理.xlsx',
            sMsgOffset:0
        }
    },
    components:{
        // pdf
    },
    mounted() {  
        if(this.$refs?.app?.addEventListener){
            this.$refs.app.addEventListener('click', () => {  
                this.$emit('request-enter-full-screen'); // 当用户点击时触发 'request-enter-full-screen' 事件  
            });  
        }
    },
    watch:{
    },
    beforeDestroy(){
        clearInterval(this.timer)
    },
    created(){
        this.getUserInfoFn();
        this.getMainUser()
    },
    methods:{
        // 搜索输入框input事件
        handleInput(event){
            console.log(event.target.value);
            this.searchVal = event.target.value

            if(!event.target.value){
                this.searchUserList = []
                this.searchMsgList = []
                this.searchIsClickLeft = false
            }
            this.getUserInfoFn(false,'search',event.target.value);
            this.getMsgContentFn(false,'search',event.target.value)
        },
        //缩短时间
        shortTime(t){
            let time=new Date(t);
            let today = new Date();
            let todayYear = today.getFullYear();
            let todayMonth = today.getMonth()+1;
            let todayDate = today.getDate();
        
            let targetYear = time.getFullYear();
            let targetMonth = time.getMonth()+1;
            let targetDate = time.getDate();
            let targetHour = time.getHours();
            let targetMinutes = time.getMinutes();
            let targetSeconds = time.getSeconds();
            // 同一天，只显示小时、分钟、秒
            if (todayYear === targetYear && todayMonth === targetMonth && todayDate === targetDate) {
                if (targetHour < 10) {
                    targetHour = "0" + targetHour;
                }
                if (targetMinutes < 10) {
                    targetMinutes = "0" + targetMinutes;
                }
                if (targetSeconds < 10) {
                    targetSeconds = "0" + targetSeconds;
                }
                return targetHour + ":" + targetMinutes + ":" + targetSeconds;
            }
            // 同一年，只显示月日等
            if (todayYear === targetYear) {
        
                if (targetMonth < 10) {
                    targetMonth = "0" + targetMonth;
                }
                if (targetDate < 10) {
                    targetDate = "0" + targetDate;
                }
                if (targetHour < 10) {
                    targetHour = "0" + targetHour;
                }
                if (targetMinutes < 10) {
                    targetMinutes = "0" + targetMinutes;
                }
                if (targetSeconds < 10) {
                    targetSeconds = "0" + targetSeconds;
                }
                return `${targetMonth}-${targetDate} `+targetHour + ":" + targetMinutes + ":" + targetSeconds;
            }
            return t;
        },

        // 左侧用户或群列表点击
        userListClick(item,index,type){
            console.log(item,'item---------------')
            this.itemUserInfo = item
            if(type === 'user'){
                this.activeIndex = index
                this.wxid = item.wxid
                this.offset = 0
                this.topFlag = false
                this.msgList = []
                this.isFresh = true
                // getMsgContentFn(refreshFlag,type,searchVal,gType)
                // 是群消息时
                if(item.is_chatroom == 1){
                    this.getMsgContentFn('','','',true)
                }else{
                    this.getMsgContentFn()
                }
            }else{
                this.searchIsClickLeft = true
                this.sMsgOffset = 0
                this.searchTopFlag = false
                this.searchWxid = item.wxid
                this.searchMsgList = []
                this.searchIsFresh = true
                this.searchActiveIndex = index
                this.getMsgContentFn(false,'searchLeftClick','')
            }
           
        },
        // 左侧聊天用户列表滚动
        chatLeftScroll(event){
            const dialog = event.target;
            if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) {
                // 当内容滑动到底部时，执行想要的操作
                console.log('滚动到底部了')
                this.userOfferset += 10
                this.getUserListLength()
            }
        },
        // 获取用户列表最新数组长度
        getUserListLength(){
            let obj = {
                offset:0,
                filter:{
                    is_stranger:0,
                    is_main_account:0,
                },
                op:{
                    is_stranger:'=',
                    is_main_account:'=',
                },
            }
            getUserInfo(obj).then(res=>{
                console.log(res,'res 341---------------')
                if(res.code === 1){
                    if(res.data.total > this.userList.length){
                        this.getUserInfoFn()
                    }
                }
            })
        },
        searchShowScroll(){
            let st = document.getElementById('chatRightCenterSearch').scrollTop
            if (st === 0 && this.searchIsClickLeft) {
                this.searchIsFresh = false
                // 你的业务逻辑
                this.sMsgOffset += 20
                this.getMsgContentFn(false,'searchLeftClick','')
            }
        },
        // 判断是否到顶部
        showScroll () {
            this.$nextTick(()=>{
                let st = document.getElementById('chatRightCenter').scrollTop
                // let sh = document.getElementById('output').scrollHeight
                if (st === 0) {
                    this.isFresh = false
                    // 你的业务逻辑
                    this.offset += 20
                    this.getMsgContentFn()
                }
            })
        },
        // 打开文件指定目录
        openFile(url){
            const { shell } = require('electron')
            let urls = url.replace(/\//g,"\\")
            let urlsArr = urls.split('\\')
            urlsArr.forEach((item,index)=>{
                if(!item){
                    urlsArr.splice(index,1)
                }
            })
            let urlStr = urlsArr.join('\\\\')
            console.log(urlStr,'url')
            // return 
            shell.openPath(urlStr)
        },
        // 刷新页面数据
        refresh(isZidon){
            // 是否是定时自动刷新 true 是，false 不是
            if(isZidon){
                this.topFlag = false
                this.isFresh = false
                this.userFreshFlag = false
                this.getUserInfoFn(true)
            }else{
                // this.userOfferset = 0
                this.topFlag = false
                // this.msgList = []
                this.isFresh = false
                this.userList = []
                this.userFreshFlag = false
                this.getUserInfoFn()
            }    
        },
        getMainUser(){
            let obj = {
                filter:{
                    is_main_account:1,
                },
                op:{
                    is_main_account:'=',
                },
                offset:0
            }
            getUserInfo(obj).then(res=>{
                if(res.code === 1){
                    if(res.data.rows.length){
                        this.mainAcount =  res.data.rows
                    }   
                }
            })

        },
        // 获取用户信息
        getUserInfoFn(refreshFlag,type,searchVal){
            
            // 为搜索时
            if(type){
                let obj = {
                    filter:{
                        nickname:searchVal,
                    },
                    op:{
                        nickname:'like',
                    },
                    limit:9999,
                    offset:0
                }
                getUserInfo(obj).then(res=>{
                    if(res.code === 1){
                        this.searchUserList = res.data.rows    
                        if(!this.searchVisible || !searchVal){
                            this.searchUserList = []
                        }           
                    }
                })
            }else{
                if(this.userFreshFlag){
                    return
                }
                let obj = {
                    type:1,
                    filter:{
                        is_stranger:0,
                        is_main_account:0,
                    },
                    op:{
                        is_stranger:'=',
                        is_main_account:'=',
                    },
                    offset:refreshFlag ? 0 : this.userOfferset
                }
                getUserInfo(obj).then(res=>{
                    if(res.code === 1){
                        // 是否为定时刷新 
                        if(!refreshFlag){
                            if(res.data.rows.length){
                                this.userList.push(...res.data.rows)
                                this.contrastList.push(...res.data.rows)
                                if(res.data.rows.length < 10){
                                    this.userFreshFlag = true
                                }
                            }else{
                                this.userFreshFlag = true
                            }
                        //    用户列表长度小于十条时则定时刷用户列表接口
                            if(this.userList.length < 10){
                                clearInterval(this.timer)
                                this.timer = setInterval(()=>{
                                    this.refresh(true)
                                },10000)
                               
                            }
                            clearInterval(this.timer2)
                            // 定时刷新消息接口
                            this.timer2 = setInterval(()=>{
                                this.getMsgContentFn(true)
                            },10000)
                        }else{
                            console.log(res.data.rows,'res 458--------------------')
                            // 刷新操作
                            if(this.userList.length < 10){
                                if(res.data.rows[res.data.rows.length-1].id != this.contrastList[this.contrastList.length - 1].id){
                                    let filterArr =  this.contrastList
                                    let filterList = this.findExtraObjects(res.data.rows, filterArr);
                                    console.log(res.data.rows,this.contrastList,filterList,filterArr,'filterArr2222222222222222222222----');
                                    this.userList.push(...filterList)
                                }
                            }
                        }
                        this.isLoad = false
                    }
                    console.log(this.userList,'res用户信息');
                })
            }
        },
        // 时间戳转日期
        dateTimeChange(times){
            var date = new Date(times* 1000);  // 参数需要毫秒数，所以这里将秒数乘于 1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return(Y+M+D+h+m+s);
        },
        /**
         * 判断当前索引对应的时间戳与上一个索引对应的时间戳的差值是否大于10分钟
         *
         * @param currentIndex 当前索引
         * @param array 时间戳数组
         * @returns 如果当前索引为0或时间差不大于10分钟，返回false；否则返回true
         */
        isTimeDifferenceGreaterThan10Minutes(currentIndex, array) {
            if (currentIndex === 0) {
                // 如果是第一个元素，则没有之前的元素，返回false
                return false;
            }
            
            const currentItem = array[currentIndex];
            const previousItem = array[currentIndex - 1];
            
            // 假设时间戳是UNIX时间戳（单位：秒）
            const timeDifference = currentItem.timestamp - previousItem.timestamp;
            const tenMinutesInSeconds = 10 * 60;
            
            return timeDifference > tenMinutesInSeconds;
        },
        // 数组过滤方法
        arrFilter(data,flagName,listName){
            if(data.length){
                data = data.reverse()
                this[listName].unshift(...data)
                if(data.length < 20){
                    this[flagName] = true
                }
            }else{
                this[flagName] = true
            }
            
        },
        // 数组过滤处理字段值并赋值日期字段等操作
        arrFilterForDate(listName){
            this[listName] =  this[listName].map((item,index)=>{
                // let time2 = index != this.msgList.length -1 ? this.msgList[index+1].timestamp : ''
                if(item.type == 'MT_RECV_FILE_MSG'){
                    // 筛选文件名字符串
                    item.fileName = item.msg.split('\\')[item.msg.split('\\').length-1] || item.msg.split('/')[item.msg.split('/').length-1]
                }
                // 日期字段赋值
                if(this.isTimeDifferenceGreaterThan10Minutes(index, this[listName]) || index == 0){
                    item.dateTime = this.shortTime(this.dateTimeChange(item.timestamp)) 
                }
                return {
                    ...item
                }
            });
            console.log(this[listName],listName,'arrFilterForDate');
        },
        // 获取群聊天内容(refreshFlag 是否为刷新操作)
        getMsgContentFn(refreshFlag,type,searchVal){
            // 为搜索操作时
            if(type){
                let obj = {}
                if(type == 'search'){
                    obj = {
                        sort:'timestamp',
                        filter:{
                            msg:searchVal,
                        },
                        op:{
                            msg:'like'
                        },
                        offset:0
                    }
                }else{
                    if(this.searchTopFlag){
                        return
                    }
                    obj = {
                        sort:'timestamp',
                        filter:{
                            to_wxid:this.searchWxid,
                        },
                        op:{
                            to_wxid:'='
                        },
                        offset:this.sMsgOffset
                    }
                }
               
                getMsgContent(obj).then(res=>{
                    if(res.code === 1){
                        // 搜索左侧用户列表点击时的操作
                        if(type != 'search'){
                            this.arrFilter(res.data.rows,'searchTopFlag','searchMsgList')
                            this.arrFilterForDate('searchMsgList')
                            if(this.searchIsFresh){
                                // 滚动到底部
                                this.$nextTick(() => {
                                    if(this.$refs?.contentSearch?.scrollHeight){
                                        this.$refs.contentSearch.scrollTop = this.$refs.contentSearch.scrollHeight;
                                        console.log(this.$refs.contentSearch.scrollHeight,'res');
                                    }
                                })
                            }
                        }else{
                            this.searchMsgList = res.data.rows
                            this.arrFilterForDate('searchMsgList')
                            if(!this.searchVisible || !searchVal){
                                this.searchMsgList = []
                            }  
                        }
                       
                    }

                })
            }else{
                if(this.topFlag){
                    return
                }
                let obj = {}
                // this.msgList = []
                console.log(this.itemUserInfo,'itemUserInfo');
                // 好友消息
                if(this.itemUserInfo.is_chatroom == 0){
                    
                    obj = {
                        z_wxid:this.mainAcount[0].wxid,
                        sort:'timestamp',
                        to_wxid:this.wxid,
                        type:1,
                        offset:refreshFlag ? 0 : this.offset
                    }
                }else{
                    // 群消息
                    obj = {
                        sort:'timestamp',
                        filter:{
                            to_wxid:this.wxid,
                        },
                        op:{
                            to_wxid:'=',
                        },
                        offset:refreshFlag ? 0 : this.offset
                    }
                }
                getMsgContent(obj).then(res=>{
                    if(res.code === 1){
                        // 不是刷新操作
                        if(!refreshFlag){
                            this.arrFilter(res.data.rows,'topFlag','msgList')
                            this.arrFilterForDate('msgList')
                            if(this.isFresh){
                                // 滚动到底部
                                this.$nextTick(() => {
                                    if(this.$refs?.content?.scrollHeight){
                                        this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
                                        console.log(this.$refs.content.scrollHeight,'res');
                                    }
                                })
                            }
                        }else{
                        // 刷新操作
                            if(res.data.rows.length){
                                res.data.rows = res.data.rows.reverse()
                                // console.log(res.data.rows,res.data.rows[res.data.rows.length-1].id,this.msgList[this.msgList.length - 1].id,'res341----');
                                if(res.data.rows[res.data.rows.length-1]?.id != this.msgList[this.msgList.length - 1]?.id){
                                    let filterArr =  this.msgList.slice(-20);
                                    let filterList = this.findExtraObjects(res.data.rows, filterArr);
                                    console.log(filterList,filterArr,res.data.rows,'进入了222222222222222222222222----');
                                    this.msgList.push(...filterList)
                                    this.arrFilterForDate('msgList')
                                }
                            }
                        }
                    
                    }   
                })
            }
           
        },
        // 对比两个数组，找出多出来的id不同的元素的函数
        findExtraObjects(arr1, arr2) {
            return arr1.filter(obj1 => 
                !arr2.some(obj2 => obj1.id == obj2.id)
            );
        }
    }
}
</script>

<style scoped>
/* 遮罩层 */
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.dialog {
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 900px;
    height: 680px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.tips{
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 遮罩层结束 */
/* 弹窗头部 */
.header{
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    align-items: center;
    height: 39px;
    background: #f1f1f1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
}
.headerLeft{
    display: flex;
    align-items: center;
    color: #000;
}
.avatar{
    width: 32px;
    border-radius: 50%;
    /* background: #000; */
}
.username{
    padding-left: 15px;
    font-size: 17px;
}
.headClose{
    width: 21px;
    height: 22px;
    cursor: pointer;
}
/* 弹窗头部结束 */
.chatBig{
    display: flex;
    width: 100%;
    height: calc(100% - 59px);
}
/* 聊天左侧区域 */
.chatLeft{
    width: 30%;
    height: 100%;
    background: #E5E4E4;
    overflow-y: auto;
}
.chatLeftItems{
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 68px;
    padding: 10px;
    color: #000;
    font-size: 15px;
}
.chatuserAvatarBox{
    
}
.chatuserAvatar{
    width: 50px;
    /* background: #000; */
    border-radius: 5px;
}
.chatUserInfo{
    width: calc(100% - 70px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    word-break: break-all;
}
.chatUserNameAndTimeBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatUserName{
    font-size: 13px;
    padding-left: 10px;
}
.time{
    font-size: 12px;
    color: #999;
}
.content{
    text-align: left;
    padding-left: 10px;
    width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 聊天左侧区域结束 */
/* 聊天右侧区域 */
.chatRight{
    width: 70%;
    color: #000;
    background: #F5F5F5;
    overflow-y: auto;
}
.chatRightTop{
    text-align: left;
    padding: 10px 20px;
    font-size: 16px;
    border-bottom: 1px solid #e5e5e5;
    position: fixed;
    width: 65.6%;
    background: #f1f1f1;
}
.chatRightCenter{
    padding-top: 10px;
    height: calc(100% - 52px);
    margin-top: 42px;
    overflow-y: auto;
}
.chatBigMsg{
    display: flex;
    flex-direction: column;

}
.friendMsgBox{
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
}
.friendName{
    font-size: 13px;
    padding-bottom: 5px;
    color: #666;
}
.frientAvatart{
    width: 40px;
    margin-top: 4px;
}
.firendMsg{
   
    font-size: 15px;
    /* padding: 10px; */
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.friendMsgContent{
    background: #fff;
    padding: 10px;
    text-align: left;
}
.fileBox{
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.fileBox:hover{
    background: #EBEBEB;
}
.fileImg{
    width: 50px;
}
.fileName{
    font-size: 13px;
    padding-left: 10px;
}
.timeBox{
    width: 100%;
    padding: 10px 0 10px;
    font-size: 12px;
    text-align: center;
    color: #999;
}
.selfMsgBox{
    
}
.selfNameBox{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 10px;
}
.selfName{
    font-size: 13px;
    color: #666;
    padding-bottom: 5px;
}
.selfMsg{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px 20px;
    margin-bottom: 10px;
}
.selfMsgContent{
    font-size: 15px;
    background: #89D961;
    padding: 10px 20px;
    text-align: left;
    /* margin-right: 10px; */
}
.selfAvatart{
    width: 40px;
    margin-top: 4px;
}
.chatRightBot{
    position: absolute;
    bottom: 0;
    width: calc(70% - 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 20px;
    border-top: 1px solid #e4e4e4;
    display: none;

}
.chatArea{
    width: 100%;
    margin-bottom: 10px;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
}
.sendBtn{
    width: 110px;
    height: 30px;
    font-size: 14px;
    color: #36C97C;
    border: unset;
    background: #E9E9E9;
    box-shadow: 1px 2px 4px #999;
    cursor: pointer;
    position: relative;
    bottom: 14px;
}
/* 聊天右侧区域 结束*/
/* 搜索 */
.searchBox{
    display: flex;
    align-items: center;
    padding: 5px;
    border: 1px solid #999;
    background: #fff;
    border-radius: 5px;
}
.searchIcon{
    width: 20px;
    margin-right: 5px;
}
.searchInput{
    margin-right: 5px;
    outline: none;
    border: unset;
}
.searchClose{
    width: 20px;
    cursor: pointer;
}
/* 搜索结束 */
</style>